<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <base th:href="@{/}"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/carousel.css">
    <style>
        /*鼠标停留 出现阴影效果*/
        .t-hover-shadow {
            transition: transform .3s ease-in-out, box-shadow .3s cubic-bezier(.47, 0, .745, .715), border .3s linear .1s;
        }

        .t-hover-shadow:hover {
            box-shadow: 0 10px 50px rgba(51, 51, 51, .25);
            -webkit-transform: translateY(-10px);
            -moz-transform: translateY(-10px);
            transform: translateY(-10px)
        }
        /*	鼠标停留 出现阴影效果**/


        /*	排行榜*/
        .rank_title {
            background: linear-gradient(to right, red,  #7B68EE	);
            -webkit-background-clip: text;
            color: transparent;
        =
        }
        .rank_line{
            background: linear-gradient(to right, #7B68EE , 	#B0C4DE);
            -webkit-background-clip: text;
            color: transparent;
            font-size: 16px;
        }
        .rank_line:hover{
            font-weight: bold;
            font-size: 22px;
        }


        a{
            text-decoration: none;
        }
        a:hover{
            text-decoration: none;
        }
        /*
         */


        h3 {
            font-weight: bold;
        }



        #footer {
            padding: 15px 0;
            background: #fff;
            border-top: 1px solid #ddd;
            text-align: center;
        }

        #topcontrol {
            color: #fff;
            z-index: 99;
            width: 30px;
            height: 30px;
            font-size: 20px;
            background: #222;
            position: relative;
            right: 14px !important;
            bottom: 11px !important;
            border-radius: 3px !important;
        }

        #topcontrol:after {
            /*top: -2px;*/
            left: 8.5px;
            content: "\f106";
            position: absolute;
            text-align: center;
            font-family: FontAwesome;
        }

        #topcontrol:hover {
            color: #fff;
            background: #18ba9b;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }
        /* 侧栏导航 */
        .sideBox {
            padding: 10px;
            height: 220px;
            background: #fff;
            margin-bottom: 10px;
            overflow: hidden;
        }

        .sideBox .hd {
            height: 30px;
            line-height: 30px;
            background: #f60;
            padding: 0 10px;
            text-align: center;
            overflow: hidden;
        }

        .sideBox .hd .more {
            color: #fff;
        }

        .sideBox .hd h3 span {
            font-weight: bold;
            font-size: 14px;
            color: #fff;
        }

        .sideBox .bd {
            padding: 5px 0 0;
        }

        #sideMenu .bd li {
            margin-bottom: 2px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            overflow: hidden;
        }

        #sideMenu .bd li a {
            display: block;
            background: #EAE6DD;
        }

        #sideMenu .bd li a:hover {
            background: #D5CFBF;
        }

        /* 列表页 */
        #mainBox {
            margin-bottom: 10px;
            padding: 10px;
            background: #fff;
            overflow: hidden;
        }

        #mainBox .mHd {
            border-bottom: 2px solid #09c;
            height: 30px;
            line-height: 30px;
        }

        #mainBox .mHd h3 {
            display: initial;
            *display: inline;
            zoom: 1;
            padding: 0 15px;
            background: #09c;
            color: #fff;
        }

        #mainBox .mHd h3 span {
            color: #fff;
            font-size: 14px;
            font-weight: bold;
        }

        #mainBox .path {
            float: right;
        }

        /* 位置导航 */
        .path {
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
        }

        .path a, .path span {
            margin: 0 5px;
        }

        /* 文章列表 */
        .newsList {
            padding: 10px;
            text-align: left;
        }

        .newsList li {
            background: url("../images/share/point.png") no-repeat 2px 14px;
            padding-left: 10px;
            height: 30px;
            line-height: 30px;
        }

        .newsList li a {
            display: inline-block;
            *display: inline;
            zoom: 1;
            font-size: 14px;
        }

        .newsList li .date {
            float: right;
            color: #999;
        }

        .newsList li.split {
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px dotted #ddd;
            height: 0px;
            line-height: 0px;
            overflow: hidden;
        }

        /* 通用带图片的信息列表_普通式 */
        .picList {
            padding: 10px;
            text-align: left;
        }

        .picList li {
            margin: 0 5px;
            height: 190px;
        }

        h3.break {
            font-size: 16px;
            display: block;
            white-space: nowrap;
            word-wrap: normal;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        h3.break>a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.html" style="font-size: 32px;">少年游-游戏众筹平台</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse"
                     style="float: right;">
                    <ul class="nav navbar-nav navbar-right">
                        <script type="text/javascript"
                                src="jquery/jquery-2.1.1.min.js"></script>
                        <script th:inline="javascript">
                            $(document).ready(function(){
                                var sessionData = [[${session.loginMember}]];
                                // console.log(sessionData);
                                if(sessionData !=null){
                                    // console.log(sessionData.username);
                                    // console.log( $("#loginMem").val());
                                    // console.log( $("#loginMem").text());
                                    // console.log( $("#loginMem").html());
                                    $("#loginMem").text(sessionData.username);
                                }
                            });
                        </script>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="loginMem">
                                <i class="glyphicon glyphicon-user"></i>
                                未登录<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a  th:href="@{/auth/member/to/center/page}"><i class="glyphicon glyphicon-scale"></i> 会员中心</a></li>
                                <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
                                <li class="divider"></li>
                                <li><a href="index.html" th:href="@{/auth/member/logout}"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                            </ul>
                        </li>
                        <li><a href="login.html" th:href="@{/auth/member/to/login/page}">登录</a></li>
                        <li><a href="reg.html" th:href="@{/auth/member/to/reg/page}">注册</a></li>
<!--                        这里的地址不要写错 不然会拦截错误-->
                        <li><a>|</a></li>
                        <li><a href="admin-login.html">管理员入口</a></li>
                    </ul>
                </div>
            </div>
        </nav>

    </div>
</div>


<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active"
             onclick="window.location.href='project.html'"
             style="cursor: pointer;">
            <img src="img/game7.jpg" alt="First slide">
<!--            <img src="img/carousel-1.jpg" alt="First slide">-->
        </div>
        <div class="item" onclick="window.location.href='project.html'"
             style="cursor: pointer;">
            <img src="img/game3.jpg" alt="Second slide">
<!--            <img src="img/carousel-2.jpg" alt="Second slide">-->
        </div>
        <div class="item" onclick="window.location.href='project.html'"
             style="cursor: pointer;">
            <img src="img/game4.jpg" alt="Third slide">
<!--            <img src="img/carousel-3.jpg" alt="Third slide">-->
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" role="button"
       data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a> <a class="right carousel-control" href="#myCarousel" role="button"
            data-slide="next"> <span
        class="glyphicon glyphicon-chevron-right"></span> <span
        class="sr-only">Next</span>
</a>
</div>
<!-- /.carousel -->


<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->

<div class="container marketing">

<!--    &lt;!&ndash; Three columns of text below the carousel &ndash;&gt;-->
    <div class="row">
        <div class="col-lg-4">
            <img class="img-circle" src="img/paopao1.jpg"
                 alt="Generic placeholder image"
                 style="width: 140px; height: 140px;">
            <h2>跑跑狼人杀</h2>
            <p>全新一代，三分钟爆笑推理</p>
            <p>
                <a class="btn btn-default" href="project.html" role="button">项目详情
                    &raquo;</a>
            </p>
        </div>
        <!-- /.col-lg-4 -->
        <div class="col-lg-4">
            <img class="img-circle" src="img/bkm1.jpg"
                 alt="Generic placeholder image"
                 style="width: 140px; height: 140px;">
            <h2>宝可梦大探险</h2>
            <p>出发吧，探险家</p>
            <p>
                <a class="btn btn-default" href="project.html" role="button">项目详情
                    &raquo;</a>
            </p>
        </div>


<!--        排行榜-->
        <script language="JavaScript">

            setTimeout(function(){location.reload()},1000*60*15); //指定15分钟刷新一次

        </script>

        <div th:if="${#strings.isEmpty(rank_data)}">没有加载到排行榜信息</div>
        <div th:if="${not #strings.isEmpty(rank_data)}">
        <div class="col-lg-4">

            <h3  class="rank_title">
                HOT 5
            </h3>
            <hr>
            <ol  id="rank" class="rank_line">
                <li>
                    <a id="rank1" class="rank_line" th:text="${rank_data.rank1Name}">RPG游戏</a>
                </li>
                <hr>
                <li><a id="rank2" class="rank_line" th:text="${rank_data.rank2Name}">RPG游戏</a>
                </li>
                <hr>
                <li><a id="rank3" class="rank_line" th:text="${rank_data.rank3Name}">RPG游戏</a></li>
                <hr>
                <li><a id="rank4" class="rank_line" th:text="${rank_data.rank4Name}">RPG游戏</a></li>
                <hr>
                <li><a id="rank5" class="rank_line" th:text="${rank_data.rank5Name}">RPG游戏</a></li>
                <hr>
            </ol>
        </div>
    </div>
    </div>
    <!-- /.row -->

    <div th:if="${#strings.isEmpty(portal_data)}">没有加载到任何分类信息</div>
    <div th:if="${not #strings.isEmpty(portal_data)}">
        <div th:each="type : ${portal_data}" class="container">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="box ui-draggable" id="mainBox">
                        <div class="mHd" style="">
                            <style>
                                .intro1:hover{
                                    color: #6199ff;
                                }
                                .intro2:hover{
                                    color: #6A48D7;
                                }
                            </style>
                            <div  style="font-size: 25px; font-weight: bold">
                                <span th:text="${type.name}" class ="intro1">单机游戏</span>
                                <span style="float: right;font-size: 20px;font-weight: normal" >
					            <a href="http://localhost:8888/project/show/more/all" style="text-decoration:none">更多</a>
                                </span>
                                <hr>
<!--                                <a href="projects.html">更多...</a>-->
                            </div>
<!--                            <h3>-->
<!--                                <label th:text="${type.name}">科技</label> <small style="color: #FFF;" th:text="${type.remark}">开启智慧未来</small>-->
<!--                            </h3>-->
                        </div>
                        <div class="mBd" style="padding-top: 10px;">
                            <div class="row">
                                <div th:if="${#strings.isEmpty(type.portalProjectVOList)}">该分类下还没有任何项目</div>
                                <div th:if="${not #strings.isEmpty(type.portalProjectVOList)}">
                                    <div th:each="project : ${type.portalProjectVOList}" class="col-md-3 t-hover-shadow">
                                         <a th:href="'http://localhost:8888/project/get/project/detail/'+${project.projectId}">
                                            <div class="thumbnail" style="border: none">
                                                <img alt="300x200" th:src="${project.headerPicturePath}" src="img/product-1.jpg" />
                                                <div class="caption">
                                                    <h3 class="break">
                                                        <a th:href="'http://localhost:8888/project/get/project/detail/'+${project.projectId}" href="project.html" th:text="${project.projectName}">活性富氢净水直饮机</a>
                                                    </h3>
                                                    <p>
                                                    <div style="float: left;">
                                                        <i class="glyphicon glyphicon-screenshot" title="目标金额"></i>
                                                        $<span th:text="${project.money}">20,000</span>
                                                    </div>
                                                    <div style="float: right;">
                                                        <i title="截至日期" class="glyphicon glyphicon-calendar"></i>
                                                        <span th:text="${project.deployDate}">2017-20-20</span>
                                                    </div>
                                                    </p>
                                                    <br>
                                                    <div class="progress" style="margin-bottom: 4px;">
                                                        <div class="progress-bar progress-bar-success"
                                                             role="progressbar" th:aria-valuenow="${project.percentage}" aria-valuenow="40" aria-valuemin="0"
                                                             aria-valuemax="100" th:style="'width: '+${project.percentage}+'%'" style="width: 40%">
                                                            <span th:text="${project.percentage}+'% '">40% </span>
                                                        </div>
                                                    </div>
                                                    <div>
														<span style="float: right;"><i
                                                                class="glyphicon glyphicon-star-empty"></i></span> <span><i
                                                            class="glyphicon glyphicon-user" title="支持人数"></i> <span th:text="${project.supporter}">12345</span></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>




    <!-- FOOTER -->
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div id="footer">
                    <div class="footerNav">
                        <a rel="nofollow" href="http://www.atguigu.com">关于我们</a> | <a
                            rel="nofollow" href="http://www.atguigu.com">服务条款</a> | <a
                            rel="nofollow" href="http://www.atguigu.com">免责声明</a> | <a
                            rel="nofollow" href="http://www.atguigu.com">网站地图</a> | <a
                            rel="nofollow" href="http://www.atguigu.com">联系我们</a>
                    </div>
                    <div class="copyRight">Copyright ?2017-2017atguigu.com 版权所有
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
<!-- /.container -->


<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="script/docs.min.js"></script>
<script src="script/back-to-top.js"></script>
<script>
    $(".thumbnail img").css("cursor", "pointer");
    $(".thumbnail img").click(function() {
        window.location.href = "project.html";
    });
</script>

</body>
</html>